<template>
  <div class="user">
    <div class="top-user">
      <van-image
        class="user-icon"
        width="70"
        height="70"
        filt="cover"
        round
        :src="userinfo.photo"
      />
      <div class="name">
        <h4>{{ userinfo.name }}</h4>
        <van-tag type="primary" color="#fff" text-color="#23a9f2">{{
          userinfo.birthday
        }}</van-tag>
      </div>
    </div>
    <van-row type="flex">
      <van-col span="8"
        ><van-icon name="newspaper-o" color="orange" size="25" />
        <p>我的作品</p></van-col
      >
      <van-col span="8"
        ><van-icon name="star-o" color="red" size="25" />
        <p>我的收藏</p></van-col
      >
      <van-col span="8"
        ><van-icon name="tosend" color="blue" size="25" />
        <p>阅读历史</p></van-col
      >
    </van-row>
    <van-cell-group>
      <van-cell icon="edit" title="编辑资料" is-link to="/edit" />
      <van-cell icon="chat-o" title="小智同学" is-link to="/student" />
      <van-cell icon="setting-o" title="系统设置" is-link />
      <van-cell icon="warning-o" title="退出登录" is-link @click="getto" />
    </van-cell-group>
  </div>
</template>
<script>
import { removeToken } from '../../utils/token'
import { mapState } from 'vuex'
// import { getuserInfo } from '../../api/user.js'
export default {
  name: 'my',
  // components:{
  //  变量名
  // },
  // created () {
  //   getuserInfo().then(res => {
  //     console.log(res)
  //     this.userinfo = res.data.data
  //   })
  // },
  computed: {
    // userinfo () {
    //   return this.$store.state.userinfo
    // },
    ...mapState(['userinfo'])
  },
  data () {
    return {
      // userinfo: {}
    }
  },
  methods: {
    getto () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '你要退出登录吗？'
        })
        .then(() => {
          // on confirm
          removeToken()
          // this.userinfo = {}
          this.$store.commit('changeinfo', {})
          this.$router.push({ path: '/home' })
          console.log(1)
        })
        .catch(() => {
          // on cancel
          console.log(0)
        })
    }
  }
}
</script>
<style lang="less">
.user {
  .top-user {
    height: 100px;
    background-color: #23a9f2;
    display: flex;
    align-items: center;
    padding-left: 15px;

    .name {
      margin-left: 5px;
      font-size: 14px;

      h4 {
        font-weight: 400;
        color: #fff;
      }
    }
  }
  .van-row {
    text-align: center;
    margin-top: 20px;
    border-bottom: 1px solid #ccc;
    p {
      font-size: 14px;
    }
    padding-bottom: 20px;
  }
}
</style>
